import 'swiper/css/navigation'
import { useSize } from 'ahooks'
import { Navigation, Pagination } from 'swiper/modules'
import { Swiper, SwiperSlide } from 'swiper/react'
import { twMerge } from 'tailwind-merge'
import Image from 'next/image'
import { useEffect, useState } from 'react'
import { studentCases } from '@/assets/js/datas'

const Student = () => {
  const [active, setActive] = useState(0)
  const [bodyElement, setBodyElement] = useState(null)
  const size = useSize(bodyElement)
  
  useEffect(() => {
    // @ts-ignore
    setBodyElement(document.querySelector('body'))
  }, [])

  return (
    <section className='bg-[#F3F5F8] pt-[20px] md:pt-[50px] lg:pt-[90px]'>
      <div className='w-[1650px] max-1650:w-auto px-[10px] md:px-[20px] 2xl:px-0 mx-auto'>
        <ul className='flex items-center w-full md:w-fit gap-[10px] md:gap-[30px] bg-white px-[2px] md:px-[7px] py-[2px] md:py-[5px] rounded-full mx-auto mb-[10px] md:mb-[30px] lg:mb-[55px]'>
          <li className={twMerge('flex-1 md:flex-auto md:w-[210px] text-base md:text-[18px] lg:text-[24px] md:leading-[18px] lg:leading-[24px] text-[#333] text-center py-[6px] md:py-[10px] lg:py-[15px] rounded-full select-none cursor-pointer', active === 0 && 'bg-[#0D4F9A] text-white')} onMouseEnter={() => setActive(0)}>学员案例</li>
          <li className={twMerge('flex-1 md:flex-auto md:w-[210px] text-base md:text-[18px] lg:text-[24px] md:leading-[18px] lg:leading-[24px] text-[#333] text-center py-[6px] md:py-[10px] lg:py-[15px] rounded-full select-none cursor-pointer', active === 1 && 'bg-[#0D4F9A] text-white')} onMouseEnter={() => setActive(1)}>学员故事</li>
        </ul>
        {active === 0 ? (
          <Swiper spaceBetween={(size?.width ?? 0)  < 786 ? 0 : (size?.width ?? 0) < 1280 ? 10 : 22} slidesPerView={(size?.width ?? 0)  < 786 ? 1 : (size?.width ?? 0) < 1280 ? 2 : 3} modules={[Pagination]} pagination>
            {studentCases.map((item, index) => (
              <SwiperSlide key={index}>
                <div className='bg-white px-[10px] lg:px-[24px]  py-[20px] lg:py-[34px] rounded-[10px] cursor-pointer'>
                  <div className='flex items-start justify-between border-b pb-[10px] md:pb-[35px] mb-[10px] md:mb-[32px]'>
                    <div>
                      <div className='flex items-center mb-[28px]'>
                        <div className='relative size-[70px] mr-[14px] rounded-full overflow-hidden'>
                          <Image alt='' fill src='https://picsum.photos/70/70' />
                        </div>
                        <div className='flex-1'>
                          <p className='text-base md:text-[20px] font-bold text-[#333] leading-[20px] mb-[4px] md:mb-[8px]'>{item.name}</p>
                          <p className='text-[#333] text-xs md:text-base'>{item.time}</p>
                        </div>
                      </div>
                      <p className='text-[#0052AE] font-bold text-sm mb-[4px]'>辅导结束情况:</p>
                      <div className='max-w-[252px] max-h-[110px] min-h-[110px] overflow-y-auto' data-lenis-prevent-wheel>
                        {item.list.map((child, i) => (
                          <p className='text-[#333] text-sm mb-[4px]' key={i}>{child}</p>
                        ))}
                      </div>
                      
                    </div>
                    <div className='relative w-[180px] md:w-[210px] h-[100px] md:h-[148px]'>
                      <Image alt='' fill src='https://picsum.photos/210/148' />
                      <p className='absolute w-full bottom-0 text-center text-white before:absolute before:bottom-0 before:left-0 before:right-0 before:h-[40px] before:bg-gradient-to-b before:from-transparent before:to-[#00000080]'>
                        <span className='relative z-[1]'>{item.posterText}</span>
                      </p>
                    </div>
                  </div>
                  <p className='text-[#0052AE] font-bold text-sm mb-[4px]'>案例分析:</p>
                  <p className='text-[#333] text-sm md:text-[15px] max-h-[140px] overflow-y-auto' data-lenis-prevent-wheel>{item.text}</p>
                </div>
              </SwiperSlide>
            ))}
            <SwiperSlide>
              <div className='bg-white px-[10px] md:px-[24px]  py-[20px] md:py-[34px] rounded-[10px] cursor-pointer'>
                <div className='flex items-start justify-between border-b pb-[10px] md:pb-[35px] mb-[10px] md:mb-[32px]'>
                  <div>
                    <div className='flex items-center mb-[28px]'>
                      <div className='relative size-[70px] mr-[14px] rounded-full overflow-hidden'>
                        <Image alt='' fill src='https://picsum.photos/70/70' />
                      </div>
                      <div className='flex-1'>
                        <p className='text-base md:text-[20px] font-bold text-[#333] leading-[20px] mb-[4px] md:mb-[8px]'>祝同学</p>
                        <p className='text-[#333] text-xs md:text-base'>报名时间:大二下学期</p>
                      </div>
                    </div>
                    <p className='text-[#0052AE] font-bold text-sm mb-[4px]'>辅导结束情况:</p>
                    <p className='text-[#333] text-sm mb-[4px]'>专业排名:5/56</p>
                    <p className='text-[#333] text-sm mb-[4px]'>英语成绩:六级598</p>
                    <p className='text-[#333] text-sm mb-[4px]'>科研实力:两篇实证论文</p>
                    <p className='text-[#333] text-sm mb-[4px]'>竞赛经历:挑战杯特等奖、创业竞赛银奖</p>
                    <p className='text-[#333] text-sm'>实习经历:证券基金公司</p>
                  </div>
                  <div className='relative w-[180px] md:w-[210px] h-[100px] md:h-[148px]'>
                    <Image alt='' fill src='https://picsum.photos/210/148' />
                    <p className='absolute w-full bottom-[14px] text-center'>上科大保研北大物理</p>
                  </div>
                </div>
                <p className='text-[#0052AE] font-bold text-sm mb-[4px]'>案例分析:</p>
                <p className='text-[#333] text-sm md:text-[15px]'>学员报名时成绩和排名尚可,但科研、竞赛等背景履历空白,想冲刺清北项目。报名后保研人教务团队第一时间给学员匹配了辅导经验丰富的论文导师,带他完成了一篇高质量实证论文。打下科研基础后,在大三参营前,学员又完成了第二篇论文;在稳住绩点排名的同时,也刷出了接近600分的六级成绩,打下了扎实的基础。在夏令营阶段,导师帮助学员梳理专属的个性化考核手册,安排多次模拟面试,斩获多个头部院校优营,最终成功上岸北大数院。</p>
              </div>
            </SwiperSlide>
            <SwiperSlide>
              <div className='bg-white px-[10px] md:px-[24px]  py-[20px] md:py-[34px] rounded-[10px] cursor-pointer'>
                <div className='flex items-start justify-between border-b pb-[10px] md:pb-[35px] mb-[10px] md:mb-[32px]'>
                  <div>
                    <div className='flex items-center mb-[28px]'>
                      <div className='relative size-[70px] mr-[14px] rounded-full overflow-hidden'>
                        <Image alt='' fill src='https://picsum.photos/70/70' />
                      </div>
                      <div className='flex-1'>
                        <p className='text-base md:text-[20px] font-bold text-[#333] leading-[20px] mb-[4px] md:mb-[8px]'>祝同学</p>
                        <p className='text-[#333] text-xs md:text-base'>报名时间:大二下学期</p>
                      </div>
                    </div>
                    <p className='text-[#0052AE] font-bold text-sm mb-[4px]'>辅导结束情况:</p>
                    <p className='text-[#333] text-sm mb-[4px]'>专业排名:5/56</p>
                    <p className='text-[#333] text-sm mb-[4px]'>英语成绩:六级598</p>
                    <p className='text-[#333] text-sm mb-[4px]'>科研实力:两篇实证论文</p>
                    <p className='text-[#333] text-sm mb-[4px]'>竞赛经历:挑战杯特等奖、创业竞赛银奖</p>
                    <p className='text-[#333] text-sm'>实习经历:证券基金公司</p>
                  </div>
                  <div className='relative w-[180px] md:w-[210px] h-[100px] md:h-[148px]'>
                    <Image alt='' fill src='https://picsum.photos/210/148' />
                    <p className='absolute w-full bottom-[14px] text-center'>上科大保研北大物理</p>
                  </div>
                </div>
                <p className='text-[#0052AE] font-bold text-sm mb-[4px]'>案例分析:</p>
                <p className='text-[#333] text-sm md:text-[15px]'>学员报名时成绩和排名尚可,但科研、竞赛等背景履历空白,想冲刺清北项目。报名后保研人教务团队第一时间给学员匹配了辅导经验丰富的论文导师,带他完成了一篇高质量实证论文。打下科研基础后,在大三参营前,学员又完成了第二篇论文;在稳住绩点排名的同时,也刷出了接近600分的六级成绩,打下了扎实的基础。在夏令营阶段,导师帮助学员梳理专属的个性化考核手册,安排多次模拟面试,斩获多个头部院校优营,最终成功上岸北大数院。</p>
              </div>
            </SwiperSlide>
            <SwiperSlide>
              <div className='bg-white px-[10px] md:px-[24px]  py-[20px] md:py-[34px] rounded-[10px] cursor-pointer'>
                <div className='flex items-start justify-between border-b pb-[10px] md:pb-[35px] mb-[10px] md:mb-[32px]'>
                  <div>
                    <div className='flex items-center mb-[28px]'>
                      <div className='relative size-[70px] mr-[14px] rounded-full overflow-hidden'>
                        <Image alt='' fill src='https://picsum.photos/70/70' />
                      </div>
                      <div className='flex-1'>
                        <p className='text-base md:text-[20px] font-bold text-[#333] leading-[20px] mb-[4px] md:mb-[8px]'>祝同学</p>
                        <p className='text-[#333] text-xs md:text-base'>报名时间:大二下学期</p>
                      </div>
                    </div>
                    <p className='text-[#0052AE] font-bold text-sm mb-[4px]'>辅导结束情况:</p>
                    <p className='text-[#333] text-sm mb-[4px]'>专业排名:5/56</p>
                    <p className='text-[#333] text-sm mb-[4px]'>英语成绩:六级598</p>
                    <p className='text-[#333] text-sm mb-[4px]'>科研实力:两篇实证论文</p>
                    <p className='text-[#333] text-sm mb-[4px]'>竞赛经历:挑战杯特等奖、创业竞赛银奖</p>
                    <p className='text-[#333] text-sm'>实习经历:证券基金公司</p>
                  </div>
                  <div className='relative w-[180px] md:w-[210px] h-[100px] md:h-[148px]'>
                    <Image alt='' fill src='https://picsum.photos/210/148' />
                    <p className='absolute w-full bottom-[14px] text-center'>上科大保研北大物理</p>
                  </div>
                </div>
                <p className='text-[#0052AE] font-bold text-sm mb-[4px]'>案例分析:</p>
                <p className='text-[#333] text-sm md:text-[15px]'>学员报名时成绩和排名尚可,但科研、竞赛等背景履历空白,想冲刺清北项目。报名后保研人教务团队第一时间给学员匹配了辅导经验丰富的论文导师,带他完成了一篇高质量实证论文。打下科研基础后,在大三参营前,学员又完成了第二篇论文;在稳住绩点排名的同时,也刷出了接近600分的六级成绩,打下了扎实的基础。在夏令营阶段,导师帮助学员梳理专属的个性化考核手册,安排多次模拟面试,斩获多个头部院校优营,最终成功上岸北大数院。</p>
              </div>
            </SwiperSlide>
          </Swiper>
        ) : (
          <Swiper slidesPerView={(size?.width ?? 0) > 786 ? 2 : 1} spaceBetween={(size?.width ?? 0) < 786 ? 5 : (size?.width ?? 0) < 1024 ? 20 : (size?.width ?? 0) < 1536 ? 15 : 54} className='case' navigation modules={[Navigation]}>
            <SwiperSlide className='group relative rounded-t-[30px] overflow-hidden cursor-pointer'>
              <div className='relative w-full md:w-[800px] aspect-[800/552]'>
                <Image alt='product' src='/images/product/story-background-4.png' fill className='object-contain' draggable={false} />
              </div>
              <div className='absolute left-0 right-0 bottom-0 h-[150px] md:h-[275px] group-hover:h-full transition-all ease-out duration-500 bg-white rounded-t-[20px] p-[15px] md:p-[30px] before:absolute before:top-[-14px] before:left-0 before:right-0 before:h-[30px] before:rounded-t-[30px] before:bg-white/40'>
                <div className='flex items-center space-x-[10px] mb-[10px] md:mb-[24px]'>
                  <div className='size-[40px] md:size-[60px] relative rounded-full overflow-hidden'>
                    <Image  alt='' src='https://picsum.photos/60' fill />
                  </div>
                  <p className='text-base md:text-[24px] text-[#1163B5] leading-[24px] font-bold'>同学一</p>
                  <p className='text-xs md:text-base text-white px-[5px] md:px-[10px] py-[3px] bg-[#1163B5] rounded-lg'>上岸中国科学院大学</p>
                </div>
                <p className='text-xs md:text-[14px] md:leading-[20px] text-[#333]'>我是一名来自双非院校的学生，大三时我明确要保研，但课业压力、竞赛强度让我有点力不从心，多方保研机构比较后我选择了保研岛的大三全程升学辅导项目。在这里，老师们根据我的具体情况，为我制定了一套详细保研规划。从专业课程的学习到科研项目的参与，再到文书材料的准备，每一环节都有专业老师的指导和支持。在这个过程中，我不仅提升了自身的学术能力，也学会了如何更好地展现自己的优势和特点。最后，我陆续收到了中南大学、国科大等多所学校的offer，成功圆梦国科大。这段经历让我深深地感受到，选择保研岛无比正确，老师们不仅给予了我知识上的指导，更重要的是给了我信心和勇气去追逐更高的目标。</p>
              </div>
            </SwiperSlide>
            <SwiperSlide className='group relative rounded-t-[30px] overflow-hidden cursor-pointer'>
              <div className='relative w-full md:w-[800px] aspect-[800/552]'>
                <Image alt='product' src='/images/product/story-background-4.png' fill className='object-contain' draggable={false} />
              </div>
              <div className='absolute left-0 right-0 bottom-0 h-[150px] md:h-[275px] group-hover:h-full transition-all ease-out duration-500 bg-white rounded-t-[20px] p-[15px] md:p-[30px] before:absolute before:top-[-14px] before:left-0 before:right-0 before:h-[30px] before:rounded-t-[30px] before:bg-white/40'>
                <div className='flex items-center space-x-[10px] mb-[10px] md:mb-[24px]'>
                  <div className='size-[40px] md:size-[60px] relative rounded-full overflow-hidden'>
                    <Image  alt='' src='https://picsum.photos/60' fill />
                  </div>
                  <p className='text-base md:text-[24px] text-[#1163B5] leading-[24px] font-bold'>同学一</p>
                  <p className='text-xs md:text-base text-white px-[5px] md:px-[10px] py-[3px] bg-[#1163B5] rounded-lg'>上岸中国科学院大学</p>
                </div>
                <p className='text-xs md:text-[14px] md:leading-[20px] text-[#333]'>我是一名来自双非院校的学生，大三时我明确要保研，但课业压力、竞赛强度让我有点力不从心，多方保研机构比较后我选择了保研岛的大三全程升学辅导项目。在这里，老师们根据我的具体情况，为我制定了一套详细保研规划。从专业课程的学习到科研项目的参与，再到文书材料的准备，每一环节都有专业老师的指导和支持。在这个过程中，我不仅提升了自身的学术能力，也学会了如何更好地展现自己的优势和特点。最后，我陆续收到了中南大学、国科大等多所学校的offer，成功圆梦国科大。这段经历让我深深地感受到，选择保研岛无比正确，老师们不仅给予了我知识上的指导，更重要的是给了我信心和勇气去追逐更高的目标。</p>
              </div>
            </SwiperSlide>
            <SwiperSlide className='group relative rounded-t-[30px] overflow-hidden cursor-pointer'>
              <div className='relative w-full md:w-[800px] aspect-[800/552]'>
                <Image alt='product' src='/images/product/story-background-4.png' fill className='object-contain' draggable={false} />
              </div>
              <div className='absolute left-0 right-0 bottom-0 h-[150px] md:h-[275px] group-hover:h-full transition-all ease-out duration-500 bg-white rounded-t-[20px] p-[15px] md:p-[30px] before:absolute before:top-[-14px] before:left-0 before:right-0 before:h-[30px] before:rounded-t-[30px] before:bg-white/40'>
                <div className='flex items-center space-x-[10px] mb-[10px] md:mb-[24px]'>
                  <div className='size-[40px] md:size-[60px] relative rounded-full overflow-hidden'>
                    <Image  alt='' src='https://picsum.photos/60' fill />
                  </div>
                  <p className='text-base md:text-[24px] text-[#1163B5] leading-[24px] font-bold'>同学一</p>
                  <p className='text-xs md:text-base text-white px-[5px] md:px-[10px] py-[3px] bg-[#1163B5] rounded-lg'>上岸中国科学院大学</p>
                </div>
                <p className='text-xs md:text-[14px] md:leading-[20px] text-[#333]'>我是一名来自双非院校的学生，大三时我明确要保研，但课业压力、竞赛强度让我有点力不从心，多方保研机构比较后我选择了保研岛的大三全程升学辅导项目。在这里，老师们根据我的具体情况，为我制定了一套详细保研规划。从专业课程的学习到科研项目的参与，再到文书材料的准备，每一环节都有专业老师的指导和支持。在这个过程中，我不仅提升了自身的学术能力，也学会了如何更好地展现自己的优势和特点。最后，我陆续收到了中南大学、国科大等多所学校的offer，成功圆梦国科大。这段经历让我深深地感受到，选择保研岛无比正确，老师们不仅给予了我知识上的指导，更重要的是给了我信心和勇气去追逐更高的目标。</p>
              </div>
            </SwiperSlide>
          </Swiper>
        )}
      </div>
    </section>
  )
}

export default Student